<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title>国庆头像生成</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      background: linear-gradient(#ff4b3d, #ffde28) #ffde28;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      zoom: 1;
    }
    *{
      list-style: none;
    }   .wwww{
            display: none !important;
        }
        .oooo{
            display: block !important;
        }
    .fss {
      margin-top: 2rem;
      padding-bottom: 2rem;
        width: 100%;
        font-family: Roboto, Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: .8rem;
        line-height: 1.43;
        letter-spacing: 0.01071em;
        text-align: center;
        color: rgba(0, 0, 0, 0.6) !important;
    }

    ul {
      /* width: 360px;
      margin: 0 auto 30px;
      overflow: hidden;
      list-style: none;
      padding: 0; */
      display: flex;
    width: 360px;
    margin: 20px auto 20px;
    overflow: hidden;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
    }

    ul li {
      width: 90px;
      float: left;
      padding: 12px; /* 原12 */
      box-sizing: border-box;
    }

    ul li img {
      width: 100%;
      border-radius: 10%;
      box-shadow: 5px 5px 5px rgb(0 0 0 / 20%);
    }
.signt{
  display: none;
}
    canvas {
      margin: auto;
      display: none;
      background: transparent;
    }
    .wwww{
            display: none !important;
        }
        .oooo{
            display: block !important;
        }
    button {
      margin: 0 auto 20px auto;
      display: block;
      width: 240px;
      height: 60px;
      color: #fff;
      background: linear-gradient(#ffe984, #ed8917) #ed8917;
      font-size: 22px;
      font-weight: bold;
      border-radius: 12px;
      border: none;
      outline: none;
    }

    .generateImg {
      width:320px;
      height:320px;
      margin: auto;
      border-radius: 10%;
    }
    .cus-text{   
    -webkit-user-select: none;   
    -moz-user-select: none;    
    -ms-user-select: none;    
    user-select: none;
    }
  </style>
</head>

<body>
  <div class="cus-text">
  <ul class="uul">
    <li><img src="./imgs/avatar-9.png"></li>
    <li><img src="./imgs/avatar-1.png"></li>
    <li><img src="./imgs/avatar-2.png"></li>
    <li><img src="./imgs/avatar-4.png"></li>
    <li><img src="./imgs/avatar-6.png"></li>
    <li><img src="./imgs/avatar-3.png"></li>
    <!-- <li><img src="./imgs/avatar-5.png"></li> -->
    <li><img src="./imgs/avatar-7.png"></li>
    <li><img src="./imgs/avatar-8.png"></li>
    
  </ul>

  <button id="button">上传图片</button>
  <canvas id="canvas" width="800" height="800"></canvas>
  <div style="width: 100%;">
    <img class="image ttt" style="width: 320px;
    height: 320px;
    display: block;
    margin: auto;
    border-radius: 10%;" src="./imgs/txx.png">
<img src="./imgs/avatar-9.png" class="signt generateImg xxx">
  </div>
  
  <input type="file" accept="image/*" hidden>
 
  </div>
  <p class="fss"><a style="color: rgba(0, 0, 0, 0.6);text-decoration: none;"
    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-lf7ukq-MuiTypography-root-MuiLink-root"
    href="https://www.cnblogs.com/Awchao/">@</a><a style="color: rgba(0, 0, 0, 0.6);text-decoration: none;"
    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-lf7ukq-MuiTypography-root-MuiLink-root"
    href="https://www.cnblogs.com/Awchao/">一起成长(长按保存图片)</a></p>
  <script>
    if (/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)==false){
    window.location.href = "https://www.cnblogs.com/Awchao/";
} 

document.onkeydown = function () {
    if (window.event && window.event.keyCode == 123) {
        alert("F12被禁用");
        event.keyCode = 0;
        event.returnValue = false;
    }
    if (window.event && window.event.keyCode == 13) {
        window.event.keyCode = 505;
    }
    if (window.event && window.event.keyCode == 8) {
        alert(str + "\n请使用Del键进行字符的删除操作！");
        window.event.returnValue = false;
    }
}

document.oncontextmenu = function (event) {
    if (window.event) {
        event = window.event;
    }
    try {
        var the = event.srcElement;
        if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
            return false;
        }
        return true;
    } catch (e) {
        return false;
    }
}

    const ul = document.querySelector('ul')
    const img = document.querySelectorAll('ul img')
    const button = document.querySelector('button')
    const canvas = document.querySelector('#canvas')
    const ctx = canvas.getContext('2d')
    const generateImg = document.querySelector('.generateImg')
    const fileUpload = document.querySelector('input')
    let upLoadImg
    let avatarIcon
    // 画canvas
    function drawImage(img) {
      ctx.drawImage(img, 0, 0, 800, 800)
    }
    // 清空canvas
    function resetCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.fillStyle = 'rgba(255, 255, 255, 0)'
    }
    function canvasToImg() {
      generateImg.src = canvas.toDataURL("image/png")
    }
    // 点击icon
    ul.addEventListener('click', function (event) {
      if (event.target.nodeName.toLowerCase() === 'img') {
        resetCanvas()
        upLoadImg && drawImage(upLoadImg)
        drawImage(event.target)
        canvasToImg()
        avatarIcon = event.target
      }
    })
    // 上传图片
    button.addEventListener('click', function () {
      fileUpload.click()
    })
    // 监听文件变化
    fileUpload.addEventListener('change', function () {
      const img = new Image()
      img.src = URL.createObjectURL(this.files[0])
      img.onload = function () {
        drawImage(img)
        drawImage(avatarIcon)
        canvasToImg()
        upLoadImg = img
      }
    })
    // 默认是第一张
    img[0].onload = function () {
      drawImage(img[0])
      avatarIcon = img[0]
      canvasToImg()
    }

    </script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/zduan.js"></script>
</body>

</html>